<!--
 * @Description: 地图定位选择
 * @Author: JiangMing
 * @Date: 2021-08-26 14:42:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2022-11-04 15:30:00
-->
<template>
	<el-dialog
		title="定位选择"
		v-model="dialogVisible"
		width="10rem"
		append-to-body
		:before-close="close"
	>
		<div>
			<div class="input-map">
				<el-autocomplete
					v-model="addressInput"
					placeholder="请输入详细地址"
					:fetch-suggestions="querySearch"
					@select="handleSelect"
					class="input-map-autocomplete"
				>
					<!-- <template #prepend>
						<el-select v-model="cityName" placeholder="选择市" clearable>
							<el-option
								v-for="(item, index) of regionDict"
								:key="index"
								:value="item.dictName"
								:label="item.dictName"
							/>
						</el-select>
					</template> -->
					<template #default="{ item }">
						<div class="suggestions-name">
							<span>{{ item.name }}</span>
							<!-- <span class="text-info">{{ item.district }}</span> -->
						</div>
						<div class="suggestions-address" :title="item.address">
							{{ item.address }}
						</div>
					</template>
				</el-autocomplete>
			</div>
			<egis-map
				ref="mapRef"
				class="map-view"
				:zoom="14"
				@ready="ready"
				@mapClick="mapClick"
			/>
			<div>
				详细地址：
				<span v-if="currentPosition.address" class="text-primary">
					{{ currentPosition.address }}
				</span>
				<span v-else class="text-danger">未获取到地址，请重新地图选点</span>
			</div>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button class="lv2-btn-blue" :disabled="!isSubmit" @click="submit"
					>确 定</el-button
				>
			</div>
		</template>
	</el-dialog>
</template>

<script>
export default defineComponent({
	props: {
		position: {
			type: Object,
			default: {
				longitude: '',
				latitude: '',
				address: ''
			}
		}
	},
	emits: ['confirmHandle'],
	setup(props, { emit }) {
		const store = useStore()
		const mapCity = computed(() => store.state.map.city)
		const { position } = toRefs(props)
		const dialogVisible = ref(true)
		const currentPosition = ref({
			lng: position.value.longitude,
			lat: position.value.latitude,
			address: position.value.address
		}) // 当前选择的定位
		const center = computed(() => store.state.map.center)
		const regionDict = computed(() => store.state.regionDict)
		const cityName = ref('')

		// 关闭弹窗
		const close = () => {
			dialogVisible.value = false
		}
		// 确定
		const submit = () => {
			close()
			emit('confirmHandle', {
				longitude: currentPosition.value.lng,
				latitude: currentPosition.value.lat,
				address: currentPosition.value.address,
				cityName: currentPosition.value.cityName,
				regionName: currentPosition.value.regionName,
				regionCode: currentPosition.value.regionCode
			})
		}

		const mapRef = ref(null)
		const ready = () => {
			let latLng = currentPosition.value
			if (latLng.address) {
				defaultMarker(currentPosition.value, true)
			}
		}

		// 获取详细地址
		const getPosition = (location) => {
			mapRef.value.regeocode(location).then((res) => {
				console.log('regeocode', res)
				// 详细地址
				currentPosition.value.address = res.formatted_address
				currentPosition.value.cityName = res.address_component.city
				currentPosition.value.regionName = res.address_component.district
				currentPosition.value.regionCode = res.address_component.adcode
			})
		}
		// 地图点击
		const mapClick = (e, tag = '') => {
			console.log('click', e)
			let location = e.location
			currentPosition.value.lat = location.lat
			currentPosition.value.lng = location.lng
			// 获取详细地址
			getPosition(location)
			defaultMarker(currentPosition.value)
		}
		// 绘制点
		const defaultMarker = async ({ lat, lng }, panTo) => {
			const { createImgMarker, egisMap } = mapRef.value
			if (lat && lng) {
				createImgMarker({ lat, lng }, 'address-position')
				if (panTo) {
					egisMap.setCenter({
						x: lng,
						y: lat
					})
				}
			}
		}

		const addressInput = ref('')
		// 地址选择
		const handleSelect = (item) => {
			currentPosition.value.address = item.address
			currentPosition.value.lat = item.location.y
			currentPosition.value.lng = item.location.x
			getPosition(currentPosition.value)
			defaultMarker(currentPosition.value, true)
			addressInput.value = item.name
		}

		// 搜索地址
		let timer = null
		const querySearch = (value, cb) => {
			value = value ? value.trim() : value
			const { searchKeyword } = mapRef.value
			if (value) {
				clearTimeout(timer)
				timer = setTimeout(() => {
					searchKeyword(value, { region: cityName.value }).then((res) => {
						console.log('res', res)
						cb(res.pois || [])
					})
				}, 300)
			} else {
				cb([])
			}
		}

		watch(
			position,
			(val) => {
				currentPosition.value = {
					lng: val.longitude,
					lat: val.latitude,
					address: val.address
				}
				defaultMarker(currentPosition.value)
			}
			// { immediate: true }
		)

		return {
			dialogVisible,
			center,
			currentPosition,
			close,
			submit,
			isSubmit: computed(() => !!currentPosition.value.address),
			mapRef,
			ready,
			mapClick,
			addressInput,
			handleSelect,
			handleSelect,
			querySearch,
			regionDict,
			cityName
		}
	}
})

</script>

<style lang="scss" scoped>
.map-view {
	height: 5rem !important;
}
.dialog-footer {
	/* text-align: center; */
}
.text-primary {
	color: #367cef;
}
.text-danger {
	color: #ff5151;
}
.input-map {
	text-align: center;
	margin-bottom: 0.2rem;
}
:deep(.el-input) {
	width: 100%;
	.el-input__inner {
		width: 100%;
	}
}
:deep(.input-map-autocomplete) {
	width: 100%;
	.el-input-group__prepend {
		width: 1.4rem;
		.el-select,
		.el-input {
			width: 100%;
		}
	}
}
.suggestions-name {
	color: #333;
	line-height: 0.3rem;
	display: flex;
	justify-content: space-between;
	font-size: 0.16rem;
}
.suggestions-address {
	color: #999;
	line-height: 0.28rem;
	margin-bottom: 0.08rem;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.12rem;
}
.text-info {
	color: #999;
}
</style>
